<template>
  <div :class="[className, 'base']"></div>
</template>

<script>
export default {
  name: "Subscript",
  props: {
    className: String,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.base::after {
  background-repeat: no-repeat;
  background-position: left 0px bottom 0px;
  content: "";
  box-sizing: border-box;
  position: absolute;
  right: 0;
  top: 0;

  border-left: 24px solid transparent;
  border-bottom: 24px solid transparent;
  background-size: 20px;
  width: 20px;
  height: 20px;
}
.check::after {
  background-image: url(../assets/appraisal/check.png);
  border-right: 24px solid #004ca717;
  border-top: 24px solid #004ca717;
}
.oclock::after {
  background-image: url(../assets/appraisal/oclock.png);
  border-right: 24px solid #ff00002e;
  border-top: 24px solid #ff00002e;
}
</style>
